import React, { useState, useEffect } from 'react'
import { Table,Modal } from 'antd'
import { Link } from "react-router-dom"
import { useSelector } from 'react-redux'
import { GetDotofirst } from '../../../../http/dutoApi'

export default function DotoList(props) {
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [resdata, setResData] = useState([])

  const SearchData = useSelector((state) => state.doto)

  const [pageSize, setPageSize] = useState('5')
  const [pageSizeNow, setPageSizeNow] = useState('1')

  // 第几次

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = (i) => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };


  useEffect(() => {
    const current = String(pageSizeNow)
    const pageSizes = String(pageSize)
    GetDotofirst(current, pageSizes)
      .then((res) => {
        console.log('请求成功', res.data.data);
        // setResData(res.data.data)
        if (SearchData.length) {
          setResData(SearchData)
          console.log(111);
        } else {
          setResData(res.data.data)
          console.log(222);
        }
      })
      .catch((err) => {
        console.log('请求失败', err);
      })
  }, [SearchData])


  const columns = [
    {
      title: '借款编号',
      dataIndex: 'CollectionNumber',
    },
    {
      title: '姓名',
      dataIndex: 'CustomerName',
    },
    {
      title: '合同号',
      dataIndex: 'BorrowingNumber',
    },
    {
      title: '当前期次',
      dataIndex: 'OverdueDays',
    },
    {
      title: '应收本金',
      dataIndex: 'OverdueMoney',
    },
    {
      title: '应收利息',
      dataIndex: 'OverdueInterest',
    },
    {
      title: '借款管理费用',
      dataIndex: 'RiskClassification',
    },
    {
      title: '贷款类型',
      dataIndex: 'CollectionWay',
    },
    {
      title: '本期还款日',
      dataIndex: 'Collectiondate',
    },
    {
      title: '提醒次数',
      dataIndex: 'CollectionFeedback',
    },
    {
      title: '状态',
      dataIndex: 'ReimbursementAmount',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
    },
  ];

  const data = [];

  // if( SearchData.length != '' ){
  //   console.log(111);
  //   setResData(SearchData)
  // }

  for (let i = 0; i < resdata.length; i++) {
    // console.log(2222);
    data.push({
      key: i,
      CollectionNumber: resdata[i].loan_id,
      CustomerName: resdata[i].customer.name,
      BorrowingNumber: resdata[i].contract.con_no,
      OverdueDays: `1/12`,
      OverdueMoney: resdata[i].receivable.receivable_Money,
      OverdueInterest: resdata[i].receivable.receivable_Interest,
      RiskClassification: resdata[i].management_fee,
      CollectionWay: resdata[i].loan_type,
      Collectiondate: '2022-01-05' + '即将到期',
      CollectionFeedback: <a onClick={()=>{showModal(i)}} >{resdata[i].remind.remind_num}</a>,
      ReimbursementAmount: resdata[i].remind.status ? '还款中' : '未还款',
      Operation: <span><Link to={
        {
          pathname: '/home/theloandetails',
          id: resdata[i].loan_id,
          name: resdata[i].customer.name,
          state: 'Duto'
        }
      }
      ><p>查看</p></Link>

        <Link to={{
          pathname: '/home/dueremind',
          name: resdata[i].customer.name,
          id: resdata[i].remind.loan_id,
        }}>到期提醒</Link></span>,
    });
  }

  // console.log();

  const getPage = (pageSizeNow, pageSize) => {
    console.log(typeof pageSizeNow);
    console.log(typeof pageSize);
    setPageSize(pageSize)
    setPageSizeNow(pageSizeNow)
  }



  const onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
    ],
  };


  return (
    <div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data}
        pagination={
          {
            total: data.length,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total => `共${Math.ceil(total / pageSize)}页/${total}条数据`,
            pageSizeOptions: ['10', '20', '30'],
            onChange: getPage,
          }
        }

      />

      <Modal title="即将到期提醒详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <div className='informarion'>
          <div><span className='tab' >客户</span > <span className='tab'>提醒时间</span> <span className='tab'>提醒次数</span> <span className='tab'>提醒方式</span> </div>
          <div><span className='tab2' >张某某</span > <span className='tab2'>2018-07-06</span> <span className='tab2'>2</span><span className='tab2'>系统推送</span> </div>
        </div>
      </Modal>
    </div>
  );
}
